/*
 * @Description: 车票列表组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:38:45
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:53:11
 */
<template>
  <div class="ticket_list_main">
    <div
      v-if="!ticketList || ticketList.length < 1"
      class="no_data"
    >
      <p class="fontsize32">所选日期尚无可售班次</p>
    </div>
    <div
      v-else
      class="ticket_list"
    >
      <ticket-item
        v-for="(ticket, index) in ticketList"
        :key="index"
        :ticket="ticket"
        :selected="ticketIndex === index"
        @click.native="ticketIndex = index"
      ></ticket-item>
      <div class="no_more fontsize32">没有更多了</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ticketList: [ // 车票数据
        {
          time: '08:00',
          surplus: '余票20张',
          discount: {},
          original: '20.00',
          more: false
        }, {
          time: '09:00',
          surplus: '余票10张',
          discount: {
            info: '8折优惠',
            price: '16.00'
          },
          original: '20.00',
          more: false
        }, {
          time: '08:00',
          surplus: '余票20张',
          discount: {},
          original: '20.00',
          more: true
        }, {
          time: '09:00',
          surplus: '余票10张',
          discount: {
            info: '8折优惠',
            price: '16.00'
          },
          original: '20.00',
          more: false
        }, {
          time: '08:00',
          surplus: '余票20张',
          discount: {},
          original: '20.00',
          more: false
        }, {
          time: '09:00',
          surplus: '余票10张',
          discount: {
            info: '8折优惠',
            price: '16.00'
          },
          original: '20.00',
          more: false
        }
      ],
      ticketIndex: 0 // 选中车票下标
    }
  },
  mounted () {
    // 设定车票信息列表高度，当前页面仅该列表处可以上下滚动
    let other = 10.16 * parseFloat(document.querySelector('html').style.fontSize)
    document.querySelector('.ticket_list').style.height = document.body.clientHeight - other /* 754/75 */ + 'px'
  }
}
</script>

<style lang="scss" scoped>
.ticket_list_main {
  .no_data {
    color: #999;
    text-align: center;
    margin-top: 32px;
  }
  .ticket_list {
    overflow: auto;
    .no_more {
      color: #999;
      text-align: center;
      padding: 32px 0;
    }
  }
}
</style>
